<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <title>Document</title>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/userInfo.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/userInfo.css">
</head>

<body>
    <header>
        <i class="backArrow"></i> 保拍网
    </header>
    <div class="main">
        <div class="userInfo-box">
            <div class="tit">账户设置</div>
            <ul class="user-con">
                <li class="userInfo-list">
                    <div class="list-tit">安全邮箱</div>
                    <div class="list-info">未认证</div>
                    <div class="list-operation">立即绑定</div>
                </li>
                <li class="userInfo-list">
                    <div class="list-tit">手机认证</div>
                    <div class="list-info">已认证159****7324</div>
                    <div class="list-operation">修改</div>
                </li>
                <li class="userInfo-list">
                    <div class="list-tit">实名认证</div>
                    <div class="list-info">未认证</div>
                    <div class="list-operation">立即认证</div>
                </li>
                <li class="userInfo-list">
                    <div class="list-tit">企业认证</div>
                    <div class="list-info">未认证</div>
                    <div class="list-operation">立即认证</div>
                </li>
                <li class="userInfo-list">
                    <div class="list-tit">VIP会员</div>
                    <div class="list-info">认证VIP有助于了解更多信息</div>
                    <div class="list-operation">立即认证</div>
                </li>
                <li class="userInfo-list">
                    <div class="list-tit">登录密码</div>
                    <div class="list-info">定期修改密码有助于保障账号安全</div>
                    <div class="list-operation">修改</div>
                </li>
            </ul>
        </div>
        <div class="userInfo-box">
            <div class="tit">感兴趣商品</div>
            <ul class="interest-con">
                <li class="shop-list"><span class="chooseIcon"></span>化工</li>
                <li class="shop-list"><span class="chooseIcon"></span>纤维产品</li>
                <li class="shop-list"><span class="chooseIcon"></span>农产</li>
                <li class="shop-list"><span class="chooseIcon"></span>农化</li>
                <li class="shop-list"><span class="chooseIcon"></span>金属</li>
                <li class="shop-list"><span class="chooseIcon"></span>矿产</li>
                <li class="shop-list"><span class="chooseIcon"></span>百货</li>
                <li class="shop-list"><span class="chooseIcon"></span>浆纸木材</li>
                <li class="shop-list"><span class="chooseIcon"></span>设备</li>
                <li class="shop-list"><span class="chooseIcon"></span>其他财产</li>
            </ul>
        </div>
    </div>

    <!--各种弹窗开始-->
    <!--1VIP-->
    <div class="vipMask" style="display:none;">
        <div class="closeBtn"></div>
        <p class="vipMask-tit">您未注册VIP!</p>
        <a style="display:block;" href="tel:4008216623" class="callHelp">呼叫客服</a>
    </div>

    <!--2邮箱绑定-->
    <div class="emailMask" style="display:none;">
        <div class="closeBtn"></div>
        <form action="" class="e-form">
            <div class="form-list">
                <div class="listTit">邮箱：</div>
                <input type="text" class="e-address" placeholder="请输入您的邮箱">
            </div>
            <div class="form-list">
                <div class="listTit">邮箱：</div>
                <input type="text" class="e-code" placeholder="请输入验证码">
                <div class="getCode">获取验证码</div>
            </div>
            <input  type="button" class="tijiao" value="提交">
        </form>
    </div>

    <!--3手机认证-->
    <div class="phoneMask" style="display:none;">
        <div class="closeBtn"></div>
        <form action="" class="e-form">
            <div class="form-list">
                <div class="listTit">新手机号：</div>
                <input type="text" class="newPhone" placeholder="请输入新手机号码">
            </div>
            <div class="form-list">
                <div class="listTit">短信验证码：</div>
                <input type="text" class="e-code e-code2" placeholder="请输入验证码">
                <div class="getCode">获取验证码</div>
            </div>
            <input type="button" class="tijiao" value="提交">
        </form>
    </div>

    <!--4修改密码-->
    <div class="pswMask" style="display:none;">
        <div class="closeBtn"></div>
        <form action="" class="e-form">
            <div class="form-list">
                <div class="listTit">原密码：</div>
                <input type="password" class="newPhone" placeholder="请输入原密码">
            </div>
            <div class="form-list">
                <div class="listTit">新密码：</div>
                <input type="password" class="e-code" placeholder="请输入新密码">
            </div>
            <div class="form-list">
                <div class="listTit">确认密码：</div>
                <input type="password" class="e-code" placeholder="请再次输入新密码">
            </div>
            <input type="button" class="tijiao" value="提交">
        </form>
    </div>
    <!--各种弹窗结束-->
    <script>
        $(function () {
            $(".shop-list").click(function () {
                $(this).addClass("shop-list-active");
            })
        })
    </script>
</body>

</html>